<template>
  <div>
    <section class="header text-center">
      <nav class="navbar navbar-expand-lg navbar-light navbar-custom">
        <div class="container"><a class="navbar-brand" href="/"><i
          class="fas fa-shopping-bag primary-color mr-1"></i>{{$t('m.name')}}</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1"
                  aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span
            class="navbar-toggler-icon"></span></button>
          <div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
            <ul class="navbar-nav mt-2 mt-md-0">
              <li class="nav-item active"><a class="nav-link" href="#">{{$t('m.home')}}<span
                class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
                                                         role="button" data-toggle="dropdown" aria-haspopup="true"
                                                         aria-expanded="false">{{$t('m.shop')}}</a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <div class="container">
                    <div class="divider"></div>
                    <div class="row">
                      <div class="col-md-2">
                        <h6 class="text-uppercase">{{$t('m.women')}}</h6>
                        <ul class="nav flex-column">
                          <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                        </ul>
                      </div>
                      <div class="col-md-2">
                        <h6 class="text-uppercase">{{$t('m.men')}}</h6>
                        <ul class="nav flex-column">
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                        </ul>
                      </div>
                      <div class="col-md-2">
                        <h6 class="text-uppercase">{{$t('m.girl')}}</h6>
                        <ul class="nav flex-column">
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                        </ul>
                      </div>
                      <div class="col-md-2">
                        <h6 class="text-uppercase">{{$t('m.boy')}}</h6>
                        <ul class="nav flex-column">
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
                        </ul>
                      </div>
                      <div class="col-md-4">
                        <h6 class="text-uppercase">{{$t('m.featureditems')}}</h6>
                        <div class="row">
                          <div class="col-6 text-center"><a href="item.html">
                            <img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
                            <h6 class="mb-0"><a href="item.html">{{$t('m.productname')}}</a></h6>
                            <p><span class="emphasis">$49.00</span></p>
                            <a href="#" class="btn btn-sm btn-outline-secondary mt-0">{{$t('m.buynow')}}</a>
                          </div>
                          <div class="col-6 text-center"><a href="item.html">
                            <img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
                            <h6 class="mb-0"><a href="item.html">{{$t('m.productname')}}</a></h6>
                            <p><span class="emphasis">$49.00</span></p>
                            <a href="#" class="btn btn-sm btn-outline-secondary mt-0">{{$t('m.buynow')}}</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
                                               role="button" data-toggle="dropdown" aria-haspopup="true"
                                               aria-expanded="false">{{$t('m.pages')}}</a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">{{$t('m.homepage')}}</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="catalog.html">{{$t('m.catalog')}}</a>
                  <a class="dropdown-item" href="item.html">{{$t('m.ItemDetail')}}</a>
                  <a class="dropdown-item" href="cart.html">{{$t('m.cart')}}</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="contact.html">{{$t('m.contact')}}</a>

                </div>
              </li>
              <li class="nav-item"><a class="nav-link" href="contact.html">{{$t('m.contact')}}</a></li>
              
              <li class="nav-item dropdown">

                <!-- 检索功能 -->
                <!-- <Search v-model='text' @search='search'></Search> -->
                <div v-width="300"><AutoComplete :option="param" v-model="text" @change="search" type="title" :must-match="false"></AutoComplete></div>
      
              </li>


              <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="/cart" target='_blank' id="navbarDropdown"
                                               role="button" data-toggle="dropdown" aria-haspopup="true"
                                               aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span
                class="badge badge-pill badge-primary">{{total_cart()['total']}}</span></a>
                <div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
                  <h6>{{total_cart()['total']}}件商品<span class="emphasis">共计${{total_cart()['price']}}</span></h6>
                  <div class="dropdown-divider"></div>
                  <ul class="shopping-cart-items">

                    <li class="row" v-for='cart in cartlist'>
                      <div class="col-3">
                        <img :src="'http://q8g3tkq9d.bkt.clouddn.com/' + cart.img" width="60">
                      </div>
                      <div class="col-9">
                        <h6><a href="item.html">{{ cart.name }}</a></h6>
                        <span class="text-muted">{{ cart.num }}✖</span>
                        <span class="emphasis">{{ cart.price }}</span></div>
                    </li>

                  </ul>

                  <a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div>
          <div v-if='username===""'>
            <router-link to='/login'>{{$t('m.login')}}</router-link>
            /
            <router-link to='/register'>{{$t('m.register')}}</router-link>
          </div>
          <div v-else>
            {{$t('m.welcome')}}
            <router-link to='/myprofile'>{{ username }}</router-link>
            &nbsp;&nbsp;
            <Button @click='logout'>{{$t('m.loginout')}}</Button>
          </div>
          <div>
            <div v-width="100"><Select v-model="select" :datas="language" @change="lang"></Select></div>
            <!--            <h-switch v-model="h_switch" @change="lang_seitch">中/English</h-switch>-->
          </div>
        </div>
      </nav>
    </section>
  </div>
</template>

<script>
  import jsonp from 'fetch-jsonp';

const loadData = function (filter, callback) {
  // this 为 option 配置
  // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
  jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
    .then(response => response.json())
    .then((d) => {
      callback(d.result.map((r) => {
        return r[0];
      }));
    });
};
  export default {
    name: "myheader",
    // props:['cartlist','totalcount'],
    data() {
      return {
        username: '',
        select: 'zh',
        // h_switch: false,
        language: [
          {title: '中文', key: 'zh'},
          {title: 'English', key: 'en'}
        ],
        // 检索关键字
        text: '',
        param: {
        orgId: 1, // 自定义参数传递
        loadData,
        minWord: 1,
        },
        cartlist: []
      }
    },
    // 定义接收参数
    mounted: function () {
      // 接收第三方钉钉传过来的值
      var dingding_id = this.$route.query.dingding_id;
      var uid_dingding = this.$route.query.uid;
      if (dingding_id != null) {
        this.username = dingding_id;
        localStorage.setItem('username', dingding_id);
        localStorage.setItem('uid', uid_dingding);
      }
      // 接收后端传过来的微博参数
      var sina_id = this.$route.query.sina_id;
      var uid_sina = this.$route.query.uid;
      if (sina_id != null) {
        this.username = sina_id;
        localStorage.setItem('username', sina_id);
        localStorage.setItem('uid', uid_sina);
      }
      // 判断用户是否登陆
      let user = localStorage.getItem('username');
      if (user == null) {
        this.username = '';
      } else {
        this.username = user
      }
      // 自动判断是哪国的语言
      if (navigator.language === 'zh-CN') {
        this.$i18n.locale = 'zh';
        this.select = 'zh'
      } else {
        this.$i18n.locale = 'en';
        this.select = 'en'
      }
      // 判断是哪国的语言
      // this.$i18n.locale = localStorage.getItem('lang');  // 获取存储的语言
      // if (this.$i18n.locale === 'cn') {
      //   this.select = 'cn'
      // } else if (this.$i18n.locale === 'en') {
      //   this.select = 'en'
      // } else {
      //   this.$i18n.locale = 'cn';
      //   this.select = 'cn';
      // }
      this.init_cartlist()
    },
    methods: {
      // 总价总数
      total_cart:function(){
        var total = 0;
        var price = 0;
        for (let i=0, l = this.cartlist.length; i<l;i++){
          total += this.cartlist[i].num
          price += (this.cartlist[i].num * this.cartlist[i].price)
        }
        return {total:total, price:price}
      },
      // 初始化购物车
      init_cartlist:function(){
        var cart = localStorage.getItem('cart')
        if (cart){
          this.cartlist = JSON.parse(cart)
        }
      }, 
      // 检索逻辑
      search:function(){
        // console.log(this.text)
        // 跳转
        this.$router.push({'path':'/search', query:{word:this.text}})
      },
      // h-seitch 切换语言,一般为单选 多种语言不适用
      // lang_seitch: function () {
      //     if (this.h_switch === true){
      //       this.$i18n.locale = 'en'
      //     }else {
      //       this.$i18n.locale = 'cn'
      //     }
      // },
      // 下拉框切换语言
      lang: function () {
        if (this.select === 'cn') {
          this.$i18n.locale = this.select;
          localStorage.setItem('lang', this.select)
        } else {
          this.$i18n.locale = this.select;
          localStorage.setItem('lang', this.select)
        }
      },
      logout() {
        localStorage.removeItem('username');
        localStorage.removeItem('uid');
        this.username = ''
      }
    }
  }
</script>

<style scoped>
</style>
